<template>
    <!-- 按钮 -->
    
    <div class="header">
        <div class="header-left">
            <div class="header-left-time">统计时间</div>
            <span>全部</span>
        </div>
        <div class="header-right">
            <el-row class="mb-4">
                <el-button>全部</el-button>
                
                <el-button type="primary" @click="dayBtn">日</el-button>
                <el-button type="success" @click="weekBtn">周</el-button>
                <el-button type="info" @click="monthBtn">月</el-button>
                
                
                <el-button type="warning">
                    <el-icon>
                        <ArrowLeft />
                    </el-icon>
                </el-button>
                <el-button type="danger">
                    <el-icon>
                        <ArrowRight />
                    </el-icon>
                </el-button>
            </el-row>
        </div>

    </div>
    <div>
      <Customerintent :data="data"></Customerintent>
      <table1 :data="data"></table1>
      <square :data="data"></square>
      <table2 :data="data"></table2>
    </div>
    
    <!-- <Customersource></Customersource> -->
    
</template>

<script setup lang="ts">

 import Customerintent from'./echarts/Customerintent.vue'
 import table1 from './echarts/table1.vue'
 import table2 from './echarts/table2.vue'
 import square from './echarts/square.vue'
 import { ref ,reactive} from 'vue';


const data = ref([{A:"微信营销",B:1888,C:16},
{A:"电话营销",B:3888,C:33},
{A:"社群",B:1088,C:9},
{A:"独立开发",B:988,C:9},
{A:"客户介绍",B:588,C:5},
{A:"信息流",B:388,C:3},
{A:"SEM",B:1588,C:14},
{A:"其他",B:1288,C:11},
{D:"初次沟通",E:8888,F:98},
{D:"方案报价",E:7888,F:88.7},
{D:"邀约进行",E:6888,F:77},
{D:"商务谈判",E:5888,F:66.2},
{D:"拟定合同",E:4888,F:54.9},
{D:"签订合同",E:3888,F:43}]);

const dayBtn = () => {
  // 模拟数据更新
  data.value = [{A:"微信营销",B:288,C:26},
{A:"电话营销",B:388,C:30},
{A:"社群",B:108,C:11},
{A:"独立开发",B:98,C:9},
{A:"客户介绍",B:58,C:5},
{A:"信息流",B:38,C:3},
{A:"SEM",B:158,C:14},
{A:"其他",B:128,C:11},
{D:"初次沟通",E:888,F:98},
{D:"方案报价",E:788,F:88.7},
{D:"邀约进行",E:688,F:67},
{D:"商务谈判",E:588,F:66.2},
{D:"拟定合同",E:488,F:34.9},
{D:"签订合同",E:388,F:33}];
};

const weekBtn = () => {
  // 模拟改变数据
  data.value = [{A:"微信营销",B:288,C:26},
{A:"电话营销",B:3188,C:30},
{A:"社群",B:1108,C:11},
{A:"独立开发",B:198,C:9},
{A:"客户介绍",B:158,C:5},
{A:"信息流",B:138,C:3},
{A:"SEM",B:1158,C:14},
{A:"其他",B:1128,C:11},
{D:"初次沟通",E:88,F:98},
{D:"方案报价",E:78,F:88.7},
{D:"邀约进行",E:68,F:67},
{D:"商务谈判",E:58,F:66.2},
{D:"拟定合同",E:48,F:34.9},
{D:"签订合同",E:38,F:33}];
};
const monthBtn = () => {
  // 模拟改变数据
  data.value = [{A:"微信营销",B:288,C:26},
{A:"电话营销",B:13188,C:30},
{A:"社群",B:11108,C:11},
{A:"独立开发",B:1198,C:9},
{A:"客户介绍",B:1158,C:5},
{A:"信息流",B:1138,C:3},
{A:"SEM",B:1158,C:14},
{A:"其他",B:1128,C:11},
{D:"初次沟通",E:888,F:98},
{D:"方案报价",E:788,F:88.7},
{D:"邀约进行",E:688,F:67},
{D:"商务谈判",E:588,F:66.2},
{D:"拟定合同",E:488,F:34.9},
{D:"签订合同",E:388,F:33}];
};
</script>

<style lang="scss" scoped>
  .header {
    height: 50px;
    width: 100%;

    .header-left {
        float: left;

        .header-left-time {
            float: left;
            font-weight: 600;
            padding-right: 10px;
        }
    }

    .header-right {
        float: right;
    }
}
</style>